<template>
	<div>
		<div class="advanticements" v-for="(item,index) in adList">
			<img :src="item.src" alt="">
			<div class="adTitle">
				{{item.title}}
				<div class="btns">
					<span v-for="oitem in item.category">
						{{oitem.name}}
					</span>
				</div>
			</div>
		</div>
		<div class="advanticements" v-for="(item,index) in cateringList">
			<img :src="item.src" alt="">
			<div class="listTitle">
				{{item.title}}
			</div>
			<div class="listText">
				{{item.text.split("*")[0]}}<br>
				{{item.text.split("*")[1]}}<br>
				{{item.text.split("*")[2]}}
			</div>
		</div>
	</div>
</template>

<script>
	export default({
		data () {
			return {
				adList: [
					{
						title: "餐饮解决方案",
						src:require("../assets/cateringSolution.png"),
						category: [
							{name:"联屏广告"},
							{name:"明厨亮灶"},
							{name:"体感游戏"},
							{name:"AR迎宾"},
							{name:"对接排队叫号"}
						]
					}
				],
				cateringList:[
					{
						title: "云端制作",
						src:require("../assets/cateringCloud.png"),
						text: "通过北影云步云平台远程下发内容，*同时管理多台设备甚至全国门店设备"
					},
					{
						title: "明厨亮灶",
						src:require("../assets/famousChef.jpg"),
						text: "对接厨房监控，构建透明厨房"
					},
					{
						title: "体感游戏",
						src:require("../assets/somatosensoryGame.jpg"),
						text: "只需一个屏幕，即可实现沉浸式游戏体验，*尤其适合在餐饮集中区吸引人流"
					},
					{
						title: "智能迎宾",
						src:require("../assets/smartWelcome.jpg"),
						text: "替换传统人工迎宾方式，形式新颖，减少成本"
					}
				]
			}
		}
	})
</script>

<style scoped>
	.advanticements {
		width:100%;
		background: #ccc;
		position: relative;
	}
	.advanticements>img{
		width: 100%;
		display: block;
		margin:0 auto;
	}
	.adTitle, .listTitle, .listText {
		width: 100%;
		position: absolute;
		top: 5%;
		text-align: center;
		font-family: "微软雅黑";
		font-size: 36px;
		font-style: bold;
		color: #3573b9;
	}
	.listTitle {
		width: auto;
		display: inline;
		margin: 5% 20%;
	}
	.listText {
		width: auto;
		display: inline;
		font-size: 18px;
		color: #000;
		text-align: left;
		margin: 8% 20%;
	}
	.btns>span{
		display: inline-block;
		color: white;
		text-align: center;
		font-family: "微软雅黑";
		font-size: 18px;
		background: #7bbbe7;
		border-radius: 4px;
		margin:24px 20px ;
		padding:5px 5px; 
		cursor: default;
	}
	.advanticements:nth-child(3) .listText,.advanticements:nth-child(3) .listTitle {
		color: #fff !important;
	}
</style>